<!-- 我的收藏数据 -->

<template>
  <div class="list-box my-scrollbar">
    <data-set-card
      v-for="(item, index) in dataSetList"
      :key="index"
      :data="item"
      :card-width="285"
      @on-click="handleClickCard(item as DataSetUse)"
      @on-download="handleToDownload(item)"
      @okCancel="refreshDataList"
    />
  </div>
  <my-infinite-loading :empty="dataSetList?.length === 0" :identifier="identifier" img-margin-top="88px" @infinite="loadData" />
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { debounce } from 'g6-fn'
  import { ref } from 'vue'

  import DataSetCard, { DataSetCardData } from '@/components/DataSetCard/indx.vue'
  import { useFileTaskStore } from '@/components/FileTaskCard/upload-store'
  import { collectionApi, customerPublicDataSetApi } from '@/services/api'

  import { ProPageForm } from '../../types'

  interface DataSetUse {
    name: string
    id: string
    createTime: string
    fileNum: number
    size: number
  }
  const fileTaskStore = useFileTaskStore()

  const dataSetList = ref<DataSetCardData[]>([])
  const pageForm = ref<ProPageForm>({
    columns: 'createTime',
    order: 'desc',
    offset: 1,
    limit: 24
  })
  const identifier = ref<number>(1)
  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await collectionApi.bucketFavorite(pageForm.value)
      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      dataSetList.value.push(...records)
    } catch (error) {
      $state.error()
    }
  }
  /*----------------------------------------- 下载 --------------------------------*/
  const handleToDownload = debounce(async (item: DataSetUse): Promise<void> => {
    console.log(item, 'item111')

    try {
      // await taskList[type - 1]()
      await customerPublicDataSetApi.download(
        { id: item.id },
        {
          timeout: 300000 //设置超时时长5min
        }
      )
      message.success('成功添加至任务队列')
      fileTaskStore.changeTaskListOptions({
        open: true,
        key: '2',
        showDownFailed: false
      })
    } catch (error) {
      console.log('下载失败', error)
    }
  }, 500)
  /*----------------------------------------- 详情 --------------------------------*/
  const handleClickCard = (item: DataSetUse) => {
    console.log('item', item)

    window.open(`/data-set/public-data-detail/${item.id}?parent=/data-set/list/public-data`)
  }
  // 刷新
  const refreshDataList = () => {
    pageForm.value.offset = 1
    dataSetList.value = []
    identifier.value = Date.now()
  }
</script>

<style lang="less" scoped>
  .list-box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 1;
    gap: 20px 20px;
  }
</style>
